<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>


<script type="text/javascript" src="js/jquery.itextclear.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
    });
</script>
<!-- jQplot CSS -->

<link rel="stylesheet" media="screen" href="${ctx}/css/Tree.css"/>
<!-- jQplot CSS END -->

<!-- DATATABLES CSS -->
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css"/>
<script type="text/javascript" src="lib/datatables/js/jquery.dataTables.js"></script>
<!-- DATATABLES CSS END -->

<link rel="stylesheet" type="text/css" href="${ctx}/css/tipswindown.css"/>
<script type="text/javascript" src="${ctx}/js/tipswindown.js"></script>

<%--
<link href="${ctx}/css/black-tie/jquery-ui-1.7.3.custom.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>
--%>

<script>
    $(document).ready(function() {
        $('#simple-button').popover('#simple-popover', {});
        $('#top-button').popover('#top-popover', {preventLeft: true, preventRight: true, preventBottom:true});
    });
</script>
<s:if test="#request.auditType.toString().equals(\"audit_exam_qual_target\")">
	<h1 class="page-title">批量设置</h1>
</s:if>
<s:else>
	<h1 class="page-title">审核配置-配置</h1>
</s:else>
<div class="container_12 clearfix leading">
    <section class="tabs grid_12 leading">
        <ul class="clearfix">
        <s:if test="#request.auditType.toString().equals(\"audit_exam_qual_target\")">
			<li><a href="#" class="current">考核对象</a></li>
		</s:if>
		<s:else>
            <li><a href="#" class="current">审核对象</a></li>
        </s:else>
        </ul>
        <section>

            <DIV class="portlet">
                <header>
                    <h5_n>${auditType.name}</h5_n>
                    <s:if test="#request.targetNames != null">
                    	<h2>${topOrg.fullName}</h2>
                     	<h2>${targetNames}</h2>
                    </s:if>
                    <s:else>
                    	<h2>${topOrg.fullName}</h2>
                   	</s:else>
                </header>
            </DIV>

            <section class="clearfix" style="display: block;">
            </section>
        </section>
    </section>


    <div class="tabs side grid_12 leading">
        <div class="clear"></div>
    </div>
</div>

<div class="container_12 clearfix leading">
    <div class="tabs side grid_6">
        <h5>审核人员</h5>
        <section style=" margin-left:0px">
            <section style="display: block;" class="clearfix">
                <div class="grid_12 alpha">
                    <div class="form-action clearfix">
                        <p>
                            <a class="button" onclick="$('#choose_div').show()">
                                <span class="icon" style="background:url(${ctx}/images/img/add.png)">&nbsp;</span>添加
                            </a>
                            <a class="button" onclick="saveOrder()">
                                <span class="icon" style="background:url(${ctx}/images/img/picture_save.png)">&nbsp;</span>保存顺序
                            </a>
                            <s:if test="#request.batchIds != null and #request.batchIds.length() > 0">
                            <a class="button" onclick="batchSave()">
                                <span class="icon" style="background:url(${ctx}/images/img/arrow_undo.png)">&nbsp;</span>批量配置并返回
                            </a>
                            </s:if>
                            <s:else>
                            <a class="button" href='${auditType == "audit_exam_qual_target" ? "#exam/qual_target_main.xhtml" : "#authority/audit_config.xhtml"}'>
                                <span class="icon" style="background:url(${ctx}/images/img/arrow_undo.png)">&nbsp;</span>返回
                            </a>
                            </s:else>
                        </p>
                    </div>
                    <hr>
                    <ol class="nostyle" id="audit_list_ol">
                        <s:iterator value="#request.auditings" var="ad" status="sta">
                            <li id="${ad.id}" type="${ad.indicator}" aname="${ad.auditTag}" seq="${ad.seq}" rid='<s:if test="#request.ad.indicator == 1">${ad.employee.id}</s:if><s:elseif test="#request.ad.indicator == 2">${ad.duty.id}</s:elseif>'>
                                <p class="title"><span id="span_${ad.id}">${ad.auditTag}</span>
                                    <button type="reset" class="button" style="float:right; margin-left:5px" onclick="remove(${ad.id}, 'old_item')">
                                        <span style="background:url(${ctx}/images/img/delete.png)" class="icon">&nbsp;</span>删除
                                    </button>
                                    <button type="reset" class="button" style="float:right; margin-left:5px" onclick="edit(${ad.id}, 'old_item')">
                                        <span style="background:url(${ctx}/images/img/page_edit.png)" class="icon">&nbsp;</span>修改
                                    </button>
                                    <button type="reset" class="button down_btn" style="float:right; margin-left:5px" onclick="doDown('${ad.id}')">
                                        <span style="background:url(${ctx}/images/img/arrow_down.png)" class="icon">&nbsp;</span>
                                    </button>
                                    <button type="reset" class="button up_btn" style="float:right;" disabled="disabled" onclick="doUp('${ad.id}')">
                                        <span style="background:url(${ctx}/images/img/arrow_up.png)" class="icon">&nbsp;</span>
                                    </button>
                                </p>
                            </li>
                        </s:iterator>
                    </ol>
                </div>
            </section>
        </section>
    </div>

    <div class="side grid_6" id="choose_div" style="display:none;">
        <h5>当前操作</h5>

        <div class="accordion" id="radio_choose_div">
            <header class="current" id="audit_type_header_1">
                <h2><input type="radio" name="r1" value="1" id="audit_type_1"> 员工选择
                    <button class="button" style="margin-left:230px;" onclick="doAddUser()">
                        <span style="background:url(${ctx}/images/img/add.png)" class="icon">&nbsp;</span>确认添加
                    </button>
                </h2>
            </header>
            <section class="clearfix" style="display: block;" id="audit_type_section_1">
                <li class="required double" style=" list-style-type:none">
                    <a class="button popover_button" onclick="onShowDiv()"> <span style="background:url(${ctx}/images/img/add.png)" class="icon">&nbsp;</span>选择</a>
                    <h5></h5>
                    <h5 id="employ_choose_name"></h5>
                    <input type="hidden" id="employ_choose_id">
                </li>
            </section>
            <header id="audit_type_header_2">
                <h2><input type="radio" name="r1" value="2" id="audit_type_2"> 职务选择
                    <button type="reset" class="button" style="margin-left:230px;" onclick="doAddDuty()">
                        <span style="background:url(${ctx}/images/img/add.png)" class="icon">&nbsp;</span>确认添加
                    </button>
                </h2>
            </header>
            <section class="clearfix" id="audit_type_section_2">
                <li class="required double" style=" list-style-type:none">
                    <p>
                        筛选：
                        <select id="org_sel" style="opacity: 0;" onchange="findChildren(this, 'org_sel')">
                            <option value="-1">请选择</option>
                            <s:iterator value="#request.organizations" var="organ">
                            <option value="${organ.id}">${organ.fullName}</option>
                            </s:iterator>
                        </select>
                        <select id="duty_sel" style="opacity: 0;">
                            <option value="-1">请选择职务</option>
                        </select>
                    </p>
                    <h5 id="duty_choose_name"></h5>
                </li>
            </section>
            <header id="audit_type_header_3">
                <h2><input type="radio" name="r1" value="3" id="audit_type_3"> 上级部门
                    <button style="margin-left:230px;" class="button" type="button" onclick="doAddOther(3)">
                        <span class="icon" style="background:url(${ctx}/images/img/add.png)">&nbsp;</span>确认添加
                    </button>
                </h2>
            </header>
            <section class="clearfix" id="audit_type_section_3">
                <li class="required double" style=" list-style-type:none">
                    <h5>上级部门</h5>
                </li>
            </section>
            <header id="audit_type_header_4">
                <h2><input type="radio" name="r1" value="4" id="audit_type_4"> 上上级部门
                    <button style="margin-left:220px;" class="button" type="button" onclick="doAddOther(4)">
                        <span style="background:url(${ctx}/images/img/add.png)" class="icon">&nbsp;</span>确认添加
                    </button>
                </h2>
            </header>
            <section class="clearfix" id="audit_type_section_4">
                <li class="required double" style=" list-style-type:none">
                    <h5>上上级部门</h5>
                </li>
            </section>
        </div>
    </div>
</div>

<input type="hidden" id="edit_id">
<div class="clear"></div>

<script type="text/javascript">
    $(function(){
        //设置弹出框(jquery.popover)
        $("a.popover_button").each(function(){
            $(this).popover('#config-popover', {});
        });

        resetDisabled();

        //var tttt=setInterval('saveOrder()',5000);
        //clearInt(tttt);
    });
    function onShowDiv(){
        //$("#config-popover").css("width", 900);
        tipsWindown("选择员工","url:post?${ctx}/employee/staff_list.xhtml?operation=select&organizationId=${organizationId}","900","350","true","","true","text");
    }
    //员工选择框返回事件
    function onSelectEployee(eid, ename){
        //alert(eid+"----------"+ename);
        if(eid == undefined || ename == undefined){
            return;
        }
        $("#employ_choose_id").val(eid);
        $("#employ_choose_name").html(ename);
    }

    //添加用户
    function doAddUser(){
        var eid = $("#employ_choose_id").val();
        var ename = $("#employ_choose_name").text();
        doAddLiToOL(1, ename, null, eid);
    }
    //添加duty
    function doAddDuty(){
        //doAddLiToOL(2, "部门经理")
        var dutyName =$("#uniform-duty_sel span:first").text();
        var dutyId = null;
        if(dutyName != ""){
            $("#duty_sel").children("option").each(function(){
                if($(this).text() == dutyName){
                    dutyId = $(this).attr("value");
                    return true;
                }
            });
        }
        if(dutyId != -1){
            doAddLiToOL(2, dutyName, null, dutyId);
        }
    }
    function doAddOther(type){
        if(type == 3){
            doAddLiToOL(3, "上级部门")
        }else if (type == 4){
            doAddLiToOL(4, "上上级部门")
        }
    }

    //type(1,2,3,4), tagName(显示名), id(记录id), rid(关联的id)
    function doAddLiToOL(type, tagName, id, rid){
        $("#choose_div").hide();
        var editId = $("#edit_id").val();
        if(rid == null || rid == undefined){
            rid = "";
        }

        var length = $("#audit_list_ol").children("li").length + 1;
        var isEdit = editId != null && editId.length >0;
        var postId = null;
        var postSeq = length;
        if(isEdit){
            postId = editId;
            postSeq = getIndex(editId);
        }
        var data = {"auditing.id":postId, "auditing.auditingTargetId":"${tid}", "auditing.auditingNo":"${auditType}", "auditing.indicator":type, "auditing.seq":postSeq, "auditing.organization.id":'${organizationId}'};
        if(type == 1){
            data = {"auditing.id":postId, "auditing.auditingTargetId":"${tid}", "auditing.auditingNo":"${auditType}", "auditing.indicator":type, "auditing.seq":postSeq, "auditing.organization.id":'${organizationId}', "auditing.employee.id":rid};
        }else if(type == 2){
            data = {"auditing.id":postId, "auditing.auditingTargetId":"${tid}", "auditing.auditingNo":"${auditType}", "auditing.indicator":type, "auditing.seq":postSeq, "auditing.organization.id":'${organizationId}', "auditing.duty.id":rid};
        }

        //edit
        if(isEdit){
            //alert(tagName+":"+type+":"+rid)
            $.getJSON("${ctx}/ajax/audit-config-edit.xhtml", data, function(audit) {
                $("#edit_id").val("");
                $("#"+editId).attr("aname", tagName);
                $("#"+editId).attr("type", type);
                $("#"+editId).attr("rid", rid);
                $("#span_"+editId).text(tagName);
            });
            return;
        }

        $.getJSON("${ctx}/ajax/audit-config-add.xhtml", data, function(audit) {
            //添加成功
            if(audit != null && audit.id > 0){
                var size = $("#audit_list_ol").children("li").length;
                var str = size == 0 ? ' disabled="disabled"' : '';
                var id = audit.id;
                var temp =
                '<li id="'+id+'" type="'+type+'" aname="'+tagName+'" rid="'+rid+'" seq="'+postSeq+'">'+
                    '<p class="title"><span id="span_'+id+'">'+ tagName + '</span>'+
                        '<button type="button" class="button" style="float:right; margin-left:5px" onclick="remove(\''+id+'\', \'new_item\')">'+
                           '<span style="background:url(${ctx}/images/img/delete.png)" class="icon">&nbsp;</span>删除'+
                        '</button>'+
                        '<button type="button" class="button" style="float:right; margin-left:5px" onclick="edit(\''+id+'\', \'new_item\')">'+
                           '<span style="background:url(${ctx}/images/img/page_edit.png)" class="icon">&nbsp;</span>修改'+
                        '</button>'+
                        '<button type="button" class="button down_btn" style="float:right; margin-left:5px" disabled="disabled" onclick="doDown(\''+id+'\')">'+
                           '<span style="background:url(${ctx}/images/img/arrow_down.png)" class="icon">&nbsp;</span>'+
                        '</button>'+
                        '<button type="button" class="button up_btn" style="float:right;" '+str+' onclick="doUp(\''+id+'\')">'+
                           '<span style="background:url(${ctx}/images/img/arrow_up.png)" class="icon">&nbsp;</span>'+
                        '</button>'+
                    '</p>'+
                '</li>';

                $(".down_btn").each(function(){
                   $(this).attr("disabled", false);
                });
                $("#audit_list_ol").append(temp);
            }
        });
    }

    //保存顺序
    function saveOrder(){
        var orderArray = new Array();
        $("#audit_list_ol li").each(function(index){
            var id = $(this).attr("id");
            var order = index+1;
            orderArray.push(id+":"+order);
        });
        if(orderArray.length > 0){
            $.getJSON("${ctx}/ajax/audit-config-saveorders.xhtml", {"orders":orderArray.join(",")}, function(res) {
                if(res){
                    alert("保存成功")
                }
            });
        }
    }
    //批量设置
    function batchSave(){
        var data = {"auditing.auditingTargetId":"${tid}", "auditing.auditingNo":"${auditType}", "auditing.organization.id":'${organizationId}', "batchIds":"${batchIds}"};
        $.getJSON("${ctx}/ajax/audit-config-batch-add.xhtml", data, function(data) {
            //添加成功
            if(data){
                alert("批量配置成功")
                window.location.href="#exam/qual_target_main.xhtml?organizationId=${organizationId}";
            }else{
                alert("批量添加失败")
            }
        });
    }

    //向上移
    function doUp(id){
        var obj = $("#"+id);
        obj.insertBefore(obj.prev("li"));
        resetDisabled();
    }
    //向下移
    function doDown(id){
        var obj = $("#"+id);
        obj.insertAfter(obj.next("li"));
        resetDisabled();
    }
    //设置向上向下的Disabled
    function resetDisabled(){
        $(".up_btn").each(function(index){
            if(index == 0){
                $(this).attr("disabled", true);
            }else{
                $(this).attr("disabled", false);
            }
        });
        var l = $(".down_btn").length;
        $(".down_btn").each(function(index){
            if(index < l - 1){
                $(this).attr("disabled", false);
            }else{
                $(this).attr("disabled", true);
            }
        });
    }
    //得到修改的项所在位置
    function getIndex(id){
        var i = 0;
        $("#audit_list_ol li").each(function(index){
            if(id == $(this).attr("id")){
                i = index+1;
                return false; //break
            }
        });
        return i;
    }

    //删除
    function remove(id, itemType){
        if(!confirm("确定要删除该审核环节吗?")){
            return;
        }
        if(itemType == "new_item"){
            $("#"+id).remove();
        }else if(itemType =="old_item"){
            $.getJSON("${ctx}/ajax/audit-config-remove.xhtml", {"auditing.id":id}, function(res) {
                $("#"+id).remove();
            });
        }
    }
    //准备修改
    function edit(id, itemType){
        $("#choose_div").show();
        $("#edit_id").val(id);
        var type = $("#"+id).attr("type"); //审核类型
        $("input:radio[name='r1']").val(type);
        $("span.checked").removeClass("checked");
        $("#uniform-audit_type_"+type+" span:first").addClass("checked");
        var name = $("#"+id).attr("aname");
        initRadioControl(type);
        if(type == 1){
            $("#employ_choose_name").text(name);
        }else if(type = 2){
            $("#duty_choose_name").text(name);
        }
    }
    function initRadioControl(type){
        $("#radio_choose_div header").removeClass("current");
        $("#radio_choose_div section").hide();
        $("#pay_type_radio_"+type).attr("checked", true);
        $("#uniform-audit_type_1 span:first").removeClass("checked");
        $("#uniform-audit_type_"+type+" span:first").addClass("checked");
        $("#audit_type_header_"+type).addClass("current");
        $("#audit_type_section_"+type).show();
    }

    function findChildren(obj, id){
        var parentId = $(obj).val();
        while(true){
            var next = $(obj).parent("div").next("div.xn_div");
            if(next != null && next.length > 0){
                next.remove();
            }else{
                break;
            }
        }
        $(obj).prev("span").html($(obj).find("option:selected").text());

        $("#uniform-duty_sel span:first").text("请选择职务");
        if(parentId == -1){
            $("#duty_sel").html("<option value=\"-1\">请选择职务</option>");
            return;
        }

        $.getJSON("${ctx}/ajax/organization-children.xhtml?parentId="+parentId, function(children) {
            if(children != null && children.length > 0){
                var strHTML = "<div id=\"uniform-" + parentId + "\" class=\"selector xn_div\">";
                strHTML += "<span style=\"-moz-user-select: none;\">请选择</span>";
                strHTML += "<select style='opacity: 0;' onchange='findChildren(this," + parentId + ")'>";
                strHTML += "<option value=\"-1\">请选择</option>";
                $.each(children, function (i, org) {
                    strHTML += "<option value=\"" + org.id + "\">" + org.fullName + "</option>";
                });
                strHTML += "</select></div>";
                $("#uniform-"+id).after(strHTML);
            }
        });

        loadDutyByOrgId(parentId);
    }

    function loadDutyByOrgId(orgId) {
        $.ajax({
            type:"post",
            url:"/ajax/duty-list.xhtml?organizationId=" + orgId,
            //data: "name=John&location=Boston",
            dataType:"json",
            success:function (data) {
                var strHTML = "<option value=\"-1\">所有职务</option>";
                if (data != null && data.length > 0) {
                    $.each(data, function (i, duty) {
                        strHTML += "<option value=\"" + duty.id + "\">" + duty.dutyName + "</option>";
                    });
                }
                $("#duty_sel").html("");
                $("#duty_sel").append(strHTML);
            }
        });
    }
</script>


    
